<template>
  <div class="votelist">
    <scroller v-show="dataList.length"  lock-x scrollbar-y height="-20" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
        <div class="votelist-item">
            <div v-for="(item,index) in dataList" :key="index" @click="linkTo(item.voteStatus,item.voteId,item.voteOptionType)" class="item over-hidden">
                <div class="title-wrap box box-pack-between box-align-center" >
                    <div class="title">{{item.voteTitle}}</div>
                    <div class="state" :class="{end:item.voteStatus == 'FINISHED',pending:item.voteStatus == 'NOTSTARTED'}" >{{stateArr[item.voteStatus]}}</div>
                </div>
                <div class="desc over-hidden">{{item.voteIntroduction}}</div>
                <div class="date over-hidden" >{{item.voteIntroduction}}</div>
            </div>
        </div>
        <div v-if="noData" class="no-data">没有更多内容</div>
    </scroller>
    <div v-if="!dataList.length" class="no-wrap">
        <img src="../../images/noData.png" alt="">
        当前数据为空
    </div>
  </div>
</template>
<script>
import {Scroller } from 'vux'
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
        dataList:[],
        pullupConfig2: {
            content: '上拉加载更多',
            downContent: '松开进行加载',
            upContent: '上拉加载更多',
            loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',    
        loading:true,
        noData:false,
        stateArr:{
            'NOTSTARTED':'未开始',
            'ONGOING':'已开始',
            'FINISHED':'已结束',
        }
      }
    },
    components: {
      Scroller
    },
    mounted() {
      this.getActivity()
    },
    methods: {
      load2 () {
         if(!this.loading) return false;
         let { pageIndex, pageCount} = this.dataForm;
         if (pageCount <= this.pageIndex){
             setTimeout(() => {
                this.$refs.demo2.disablePullup()
                this.noData = true
            }, 100)
             return false;
         }
          this.loading = false;
          this.pageIndex++;
          setTimeout(() => {
            this.getActivity()
            this.$refs.demo2.donePullup()
         }, 100)
      },
      getActivity(){
        let  url = CONSTANT.URL.VOTE.MYVOTELIST,
            param = {pageIndex:this.pageIndex,pageSize:10}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.loading = true;
                let data = res.data,
                    pageCount = data.pageCount,
                    bussData = data.bussData
                    if(pageCount == 0||pageCount == 1){
                         this.$refs.demo2.disablePullup()
                    }
                this.dataForm = data;
                this.dataList =  this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
                console.log(this.dataList)
            }else{

            }
        })
      },
      linkTo(state,id,type){
          if(state == 'FINISHED'){
              this.$router.push({ path: 'voteResult', query: { id: id,type:'myVote'}})
          }else{
            if (type == 1) {
                this.$router.push({path: '/voteDetailEasy', query: {id: id}})
            } else if(type == 2){
                this.$router.push({path: '/voteDetail', query: {id: id}})
            }
          }
      },
    }
  };
</script>
<style lang="scss">
    .votelist{
        min-height: 100%;
        background-color: #f2f2f2;
        font-size: .32rem;
        .votelist-item{
            padding-top: .3rem;
            .item{
                width: 6.4rem;
                height: 1.31rem;
                padding: .28rem .25rem .19rem;
                background-color: #fff;
                border-radius: .1rem;
                -webkit-border-radius: .1rem;
                margin: 0 auto .2rem;
                .title-wrap{
                    color: #333;
                    height: .31rem;
                    .state{
                        color: #E02121;
                        &.end{
                            color: #999999;
                        }
                        &.pending{
                            color: #198AE7
                        }
                    }
                }
                .desc{
                    font-size: .26rem;
                    color: #666;
                    height: .4rem;
                    margin-bottom: .1rem;
                    margin-top: .22rem;
                }
                .date{
                    height: .3rem;
                    font-size: .22rem;
                    color: #999;
                }
            }
        }
    }
</style>

